<template>
  <div class="app-container">
    <NavView />
    <el-container class="main-container">
      <!-- 固定侧边栏 -->
      <el-aside width="200px" class="fixed-aside">
        <el-menu :default-active="activeMenu" @select="handleMenuSelect" class="side-menu">
          <el-menu-item index="write" class="write-btn">
            <el-icon>
              <Message />
            </el-icon>
            <span>写信</span>
          </el-menu-item>
          <el-menu-item index="inbox">
            <el-icon>
              <Message />
            </el-icon>
            <span>收件箱</span>
          </el-menu-item>
          <el-menu-item index="sent">
            <el-icon>
              <Promotion />
            </el-icon>
            <span>星标邮件</span>
          </el-menu-item>
          <el-menu-item index="drafts">
            <el-icon>
              <Edit />
            </el-icon>
            <span>群邮件</span>
          </el-menu-item>
          <el-menu-item index="inbox">
            <el-icon>
              <Message />
            </el-icon>
            <span>已发送</span>
          </el-menu-item>
          <el-menu-item index="sent">
            <el-icon>
              <Promotion />
            </el-icon>
            <span>草稿箱</span>
          </el-menu-item>
          <el-menu-item index="drafts">
            <el-icon>
              <Edit />
            </el-icon>
            <span>已删除</span>
          </el-menu-item>
          <el-menu-item index="inbox">
            <el-icon>
              <Message />
            </el-icon>
            <span>垃圾箱</span>
          </el-menu-item>

          <el-sub-menu index="folders">

            <template #title>
              <span>我的文件夹</span>
            </template>

            <!-- 子菜单项 -->
            <el-menu-item index="folder1">
              <el-icon>
                <Promotion />
              </el-icon>
              <span>QQ邮件订阅</span>
            </el-menu-item>

          </el-sub-menu>
          <!-- <span style="padding: 20px;">应用</span>
          <el-menu-item index="inbox">
            <el-icon>
              <Message />
            </el-icon>
            <span>收件箱</span>
          </el-menu-item>
          <el-menu-item index="inbox">
            <el-icon>
              <Message />
            </el-icon>
            <span>收件箱</span>
          </el-menu-item>
          <el-menu-item index="inbox">
            <el-icon>
              <Message />
            </el-icon>
            <span>收件箱</span>
          </el-menu-item>
          <el-menu-item index="inbox">
            <el-icon>
              <Message />
            </el-icon>
            <span>收件箱</span>
          </el-menu-item>
          <el-menu-item index="inbox">
            <el-icon>
              <Message />
            </el-icon>
            <span>收件箱</span>
          </el-menu-item>
          <el-menu-item index="inbox">
            <el-icon>
              <Message />
            </el-icon>
            <span>收件箱</span>
          </el-menu-item>
          <el-menu-item index="inbox">
            <el-icon>
              <Message />
            </el-icon>
            <span>收件箱</span>
          </el-menu-item>
          <el-menu-item index="inbox">
            <el-icon>
              <Message />
            </el-icon>
            <span>收件箱</span>
          </el-menu-item>
          <el-menu-item index="inbox">
            <el-icon>
              <Message />
            </el-icon>
            <span>收件箱</span>
          </el-menu-item>
          <el-menu-item index="inbox">
            <el-icon>
              <Message />
            </el-icon>
            <span>收件箱</span>
          </el-menu-item> -->
        </el-menu>
      </el-aside>

      <!-- 可滚动主内容区 -->
      <el-main class="scrollable-main">
        <component :is="currentComponent" />
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import NavView from '@/components/NavView.vue';
import { Message, Promotion } from '@element-plus/icons-vue';
import InboxView from './components/InboxView.vue';
import SentView from './components/SentView.vue';
import DraftsView from './components/DraftsView.vue';
import WriteView from './components/WriteView.vue';

const activeMenu = ref('inbox');
const components = {
  inbox: InboxView,
  sent: SentView,
  drafts: DraftsView,
  write: WriteView
};

const currentComponent = computed(() => components[activeMenu.value]);

const handleMenuSelect = (index) => {
  activeMenu.value = index;
};
</script>

<style scoped lang="scss">
.app-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden; // 防止整个容器滚动

  .main-container {
    flex: 1;
    overflow: hidden; // 隐藏容器溢出
  }

  .fixed-aside {
    background-color: rgb(230, 237, 245);
    width: 235px;
    height: 100%;
    overflow-y: auto; // 侧边栏自身可滚动
    position: relative; // 为固定定位做准备
  }

  .scrollable-main {
    padding: 0;
    height: 100%;
    overflow-y: auto; // 主内容区可滚动
    background-color: #fff;
  }

  // 菜单样式
  .side-menu {
    border-right: none;
    background-color: transparent;
    height: 100%;

    .write-btn {
      background-color: rgb(15, 122, 245) !important;
      color: white !important;
      border-radius: 8px;
      margin: 12px !important;;
      height: 34px !important;

      &:hover {
        background-color: darken(rgb(15, 122, 245), 10%) !important;
      }

      span,
      .el-icon {
        color: white !important;
      }
    }

    .el-menu-item {
      height: 36px;
      line-height: 36px;
      margin: 4px 8px;
      border-radius: 4px;

      &:hover {
        background-color: rgba(200, 210, 220, 0.5);
      }

      &.is-active {
        background-color: rgba(66, 129, 255, 0.1);
        color: #141414;
      }

      .el-icon {
        margin-right: 5px;
      }
    }
  }
}
</style>
